<template>
   <div>
   	<h4 v-if="isShow==false" @click="into">去登录</h4>
   	<div v-else class="form">
   		<div class="form-wrap">
		   	<form action="" method="post">
		   		<a>用户名：<input placeholder="请输入手机号或者邮箱" type="text" v-model="user.username"/></a>
		   		<a> 密码：<input placeholder="请输入您的密码" type="password" v-model="user.password"/></a>
		   	</form>
		    <button @click="login">登录</button>
		    <button @click="out">返回</button>
	    </div>
    </div>
   </div>

</template>
<script>
    export default {
    	name:"Login",
    	data(){
    		return{
    			isShow:false,
    			user:{
    				username:"",
    				password:""
    			},
    			personal:{}
    		}
    	},
    	methods:{
    		
    		login(){
    			
    			if(this.user.username.trim() === ''){
			        alert('用户名不能为空');
			        return 0;
			      }
			      if(this.user.password.trim() === ''){
			        alert('密码不能为空');
			        return 0;
			      }
				
    			 this.$axios.post(
			       'https://test.8boluo.com/index.php/index/wxapp.login/simple',this.user
			     ).then(res => {
			      	this.personal = res.data.data;
		        	this.$router.push({name:"personal",params:this.personal});
					 if(res.data.code == 0){
			        	this.$store.commit('LOGIN',res.data.data);
			        }
			      })

    		},
    		into(){
    			this.isShow=true;
    		},
    		out(){
    			this.isShow=false;
    		}
    	}
    }
   

</script>
<style>
h4{
	cursor: pointer;
	margin-top: 100px;
}
.form{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: skyblue;
	display: flex;
	justify-content: center;
	align-items: center;
	
}
.form-wrap{
	width: 240px;
	height: 240px;	
}
form{
	padding-bottom: 10px;
	display: flex;
	flex-direction: column;
	text-align: center;
	
}
a{
	text-align: right;
	margin-bottom: 10px;
	justify-content: flex-end;
}
button{
	margin-right: 10px;
}
</style>